<template>
  <div>
    <a-card :bordered="false" style="width: 500px; height: 850px">
      <a-segmented v-model:value="value" :options="data" @change="onChange" />
      <!-- :default-selected-keys="['0-0-0']" -->
      <a-tree checkable :tree-data="VillageTreeData" v-if="selectKeys == '小区'" @check="onCheckHousing">
        <template #title="{ title, key }">
          <span>{{ title }}</span>
        </template>
      </a-tree>
      <a-tree checkable :tree-data="HeatExchangeTreeData" v-if="selectKeys == '热站'" @check="onCheckHeatExchange">
        <template #title="{ title, key }">
          <span>{{ title }}</span>
        </template>
      </a-tree>
    </a-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, toRaw } from 'vue';
import {
  getVillageList,
  getHeatExchangeList,
  getPlanList,
} from '#/api/core/heatingSeason';
const data = reactive(['热站', '小区']); // 选项
const value = ref('热站'); // 初始值为热站
/**
 * 树结构
 * */
const VillageTreeData = ref([]);
const HeatExchangeTreeData = ref([]);
const selectKeys = ref('');

const onChange = (val: string) => {
  selectKeys.value = val;
  if (val === '热站') {
    getHeatExchangeList().then((res) => {
      HeatExchangeTreeData.value = res.map((item: any) => {
        return {
          title: item.name,
          key: item.id,
        };
      });
    });
  } else if (val === '小区') {
    getVillageList().then((res) => {
      VillageTreeData.value = res.map((item: any) => {
        return {
          title: item.name,
          key: item.id,
        };
      });
    });
  }
};
onChange(value.value);
const $emit = defineEmits(['HousingTreeData', 'ExchangeTreeData']);
const onCheckHousing = (selectedKeys: any, info: any) => {
  console.log('小区-复选框选择事件', selectedKeys, info.checkedNodes);
  $emit('HousingTreeData', selectedKeys, '小区', info.checkedNodes);

};
const onCheckHeatExchange = (selectedKeys: any, info: any) => {
  console.log('换热站-复选框选择事件', selectedKeys, info);
  $emit('ExchangeTreeData', selectedKeys, '热站', info.checkedNodes);
};
</script>
<style scoped></style>
